<template>
  <div class="hover_main_container" v-show="isShowHoverPopup">
    <!-- <div class="hover_close" @click="doCloseHoverPopup"></div> -->
    <div class="hover-content">
      <el-table
        :data="tableData"
        style="width: 100%;"
        height="150"
        row-key="code"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <template slot="empty">
           <div >当前管线暂未关联覆盖范围无法统计覆盖区信息，请关联后再试</div>
        </template> 
        <el-table-column
          prop="full_name"
          label="村社名称"
          width="240">
        </el-table-column>
        <el-table-column
          prop="region_name"
          label="社名"
          width="140">
        </el-table-column>
        <el-table-column
          prop="house_num"
          label="村社户数"
          width="60">
        </el-table-column>
        <el-table-column
          prop="person_num"
          label="村社人数"
          width="60">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { unitList }from '@/until/NameList';
import { getYingXiangQuYuList } from "@/api/apiPOI";

export default {
  name: "GuanXianFuGaiQY",
  components: {},
  props: {
    paramsData: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  watch: {
    GuanXianData: {
      handler(newVal, oldVal) {
        let paramType = (value, type) => Object.prototype.toString.call(value).includes(type);
          if( paramType(newVal, 'Object')){
            
            this.tableData =  newVal.item;
          }
      },
      immediate:true
    }
  },
  computed: {
   
  },
  created() {
    // this.test();
  },
  data() {
    return {
      isShowHoverPopup: true,
      dataList: {
          // "valueErr": "故障",
          // "MODE": "远程",
          // "tm": "2023-06-16 11:41:00",
          // "kd": 100.00,
          // "sumw": 111.00,
          // "address_name": "输水东干管供水北干二分干一支管(GJC2-2)",
          // "statu": "全开",
          // "press": 0.50,
          // "sq": 0.000
      },
      reqParams: this.paramsData,
      unit: unitList,
      tableData: [{
          code: 1,
          short_code: '2016-05-02',
          full_name: '王小虎',
          region_name: '上海市普陀区金沙江路 1518 弄'
        }, {
          code: 2,
          short_code: '2016-05-04',
          full_name: '王小虎',
          region_name: '上海市普陀区金沙江路 1517 弄'
        }, {
          code: 3,
          short_code: '2016-05-01',
          full_name: '王小虎',
          region_name: '上海市普陀区金沙江路 1519 弄',
          children: [{
            code: 31,
              short_code: '2016-05-01',
              full_name: '王小虎',
              region_name: '上海市普陀区金沙江路 1519 弄'
            }, {
              code: 32,
              short_code: '2016-05-01',
              full_name: '王小虎',
              region_name: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          code: 4,
          short_code: '2016-05-03',
          full_name: '王小虎',
          region_name: '上海市普陀区金沙江路 1516 弄'
        }],
    };
  },

  methods: {
    doCloseHoverPopup() {
      this.isShowHoverPopup = false;
    },

    test(value) {
      console.log("*********",value);
      
      // this.tableData = value;
    },

    loadYingXiangQYData(code) {
      getYingXiangQuYuList({ code: code.toString() }).then((res) => {
        let paramType = (value, type) =>Object.prototype.toString.call(value).includes(type);
        if (paramType(res, "Object")) {
          this.tableData = res.data;
        }
      });
    }

  }
}
</script>

<style lang="scss" scoped>
  .hover_main_container {
    // width: 100%;
    // height: 300px;
    // background-color: rgba(123, 232, 158, 0.1);
  }

  .hover_main_container:after {
    // content: "";
    // position: absolute;
    // border-width: 10px;
    // border-style: solid;
    // border-color: rgb(20, 63, 91) transparent transparent transparent;
    // top: 300px;
    // left: 200px;
  } 

  .hover_close {
    width: 14px;
    height: 15px;
    background: url("@/assets/poipopup/poi_popup_close.png");
    position: relative;
    top: -24px;
    left: 386px;
    cursor: pointer;
  }

  .hover-content {
    // padding: 20px;
  }

  .content-item {
    display: flex;
    justify-content: flex-start;
    padding: 4px 0;

    span:nth-child(2n + 1) {
      width: 94px;
      text-align: right;
      font-family: SourceHanSansCN-Regular;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 18px;
      letter-spacing: 0px;
      color: #daf0ff;
    }

    span:nth-child(2n) {
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 18px;
      letter-spacing: 0px;
      color: #00baff;
    }
  }

  .grid {
    // border: 1px solid gray;
    // width: 400px;
    // height: 200px;
    // display: grid;
    // grid-template-columns: repeat(2, 1fr);
    // overflow: hidden;
    // grid-auto-flow: row;
    // grid-gap: 5px;
    // grid-auto-rows: 50px;
    display: grid;
    // grid-template-columns: 100px 300px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
    grid-gap: 5px;
    // grid-auto-rows: 50px;
  }

  .sites {
    grid-column-start: span 2;
  }


</style>